<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨伞toggle</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            /*width: 100vw;*/
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(skyblue,lightblue);
        }
        .umbrella *::before,.umbrella *::after{
            content: '';
            position: absolute;
        }
        :root{
            --font-size: 10px ;
        }
        .umbrella {
            position: relative;
            width: 25em;
            height: 26em;
            font-size: var(--font-size);
            /*border: 1px solid red;*/

            /*让伞倾斜*/
            transform: rotate(-30deg);
        }
        .umbrella .canopy{
            position: absolute;
            width: inherit;
            height: 5.5em;
            top: 2.5em;
            /*border: 1px solid red;*/

            /*伞盖合上*/
            /*transform-origin 属性允许您改变被转换元素的位置。*/
            transform-origin: top;
            -webkit-transform: scale(0.08, 4);
            -moz-transform: scale(0.08, 4);
            -ms-transform: scale(0.08, 4);
            -o-transform: scale(0.08, 4);
            transform: scale(0.08, 4);
        }
        .umbrella .canopy::before{
            width: inherit;
            height: 12.5em;
            background: rgb(100,100,100);
            border-radius: 12.5em 12.5em 0 0;
            transform: scaleY(0.4);
            top: -4em;

        }
        .umbrella .canopy::after{
            width: inherit;
            height: 1.5em;
            background-color: #333333;
            top: 4em;
            border-radius: 50%;

            /*隐藏伞盖的下半部分*/
            -webkit-transform: scaleY(0);
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -o-transform: scaleY(0);
            transform: scaleY(0);
        }
        .umbrella .shaft{
            position: absolute;
            width: 0.8em;
            height: 18em;
            background-color: rgba(100,100,100,0.7);
            top:5.5em;
            left: calc((100% - 0.8em)/2);
        }
        /*画顶部露出伞盖的尖头*/
        .umbrella .shaft::before{
        width: 6em;
            height: 3em;
            background-color: rgba(100,100,100,0.7);
            left: calc((100% - 6em) / 2);
            top: -5.5em;
            border-radius: 6em 6em 0 0;
            transform: scaleX(0.1);
        }
        /*伞的钩把手*/
        .umbrella .shaft::after{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 4em;
            height: 2.5em;
            border: 1em solid #333;
            top: 100%;
            left: calc(50% - 4em + 1em / 2);
            border-radius: 0 0 2.5em 2.5em;
            border-top: none;
        }
        /*设置控件 叠于伞的上层*/
        .toggle{
            position: absolute;
            filter: opacity(0);
            width: 25em;
            height: 26em;
            font-size: var(--font-size);
            cursor: pointer;
            z-index: 2;
        }
        /*把伞正过来*/
        .toggle:checked ~ .umbrella{
            transform: rotate(0deg);
        }
        /*打开伞盖*/
        .toggle:checked ~ .umbrella .canopy{
            -webkit-transform: scale(1, 1);
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }
        /*显示很出伞盖下半部分*/
        .toggle:checked ~ .umbrella .canopy::after{
            transform: scaleY(1);
        }
        /*设置缓动效果*/
        .umbrella, .umbrella .canopy ,.umbrella .canopy::after{
            -webkit-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -moz-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -ms-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            -o-transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
            transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
        }

    </style>
</head>
<body>
    <input type="checkbox" class="toggle">
    <figure class="umbrella">
        <div class="canopy"></div>
        <div class="shaft"></div>
    </figure>
</body>
</html>